let datas = [
    {
        tit : '热点',
        cons : [
            '此次会晤是金砖大家庭实现历史性扩员后',
            '习近平主席同金砖国家领导人首度线下聚首',
            '展望习近平主席喀山之行',
            '三个关键词尤为瞩目'
        ]
    },
    {
        tit : '大金砖',
        cons : ['在金砖合作机制18年的发展历程中',
                '像这样的故事还有很多',
                '10月22日至24日',
                '金砖国家领导人第十六次会晤将在俄罗斯喀山举行'
        ]
    },
    {
        tit : '热点2',
        cons : [
            '此次会晤是金砖大家庭实现历史性扩员后',
            '习近平主席同金砖国家领导人首度线下聚首',
            '展望习近平主席喀山之行',
            '三个关键词尤为瞩目'
        ]
    }
]
// 构造函数
function Active(obj){
    this.el = obj.el,
    this.curI = obj.curI || 0 ,
    this.data = obj.data,
    this.show()
}
Active.prototype.show = function(){
    // 判断是否有data并渲染数据
    this.data && this.render(),
    // 获取元素
    this.getEle(),
    this.active1(),
    this.show1()
}
// 获取元素
Active.prototype.getEle = function (){
    this.tit = [...this.el.querySelectorAll('span')],
    this.cons = [...this.el.querySelectorAll('.cons div')]
}
// 添加高亮
Active.prototype.active1 = function (){
    this.tit[this.curI].classList.add('active')
    this.cons[this.curI].classList.add('show')

}
// 渲染数据
Active.prototype.render = function(){
    this.el.innerHTML = ` <div class="nav">
                            ${this.data.map((obj)=>{
                                return `<span>${obj.tit}</span>`
                            }).join('')}
                        </div>
                        <div class="cons">
                            ${this.data.map((obj)=>{
                                return `<div>${obj.cons.map((item)=>{
                                    return `<p>${item}</p>`
                                    }).join('')}</div>`
                            }).join('')}
                        </div>`
}
// 点击高亮和展示对应内容
Active.prototype.show1 = function (){
    this.tit.forEach((span,i)=>{
        span.addEventListener('click',()=>{
            this.tit[this.curI].classList.remove('active')
            this.cons[this.curI].classList.remove('show')
            this.curI = i
            this.tit[this.curI].classList.add('active')
            this.cons[this.curI].classList.add('show')
        })
    })
}
let box1 = new Active({
    el : document.querySelector('.box1'),
    curI:0
})
let box2 = new Active({
    el : document.querySelector('.box2'),
    data : datas
})
let box3 = new Active({
    el : document.querySelector('.box3'),
    curI:2
})
console.log(box2)

